<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>05CSS텍스트</title>
        <style type="text/css">
            @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
            #t01 {font-family: 'Nanum Brush Script', cursive;}
        </style>
    </head>
    <body>
        <h1>CSS텍스트</h1>
        <h2>글자크기 : font-size</h2>
        <p style="font-size: 1em">
            이것은 100% 정도의 크기입니다
        </p>
        <p style="font-size: 1.5em">
            이것은 150% 정도의 크기입니다
        </p>
        <hr />
        <h2>글꼴 지정 : font-family</h2>
        <p style="font-family: 궁서">
            궁서체로 지정함
        </p>
        <p>
            font-face : 지정한 글꼴이 설치되어 있지 않으면 직접 다운로드해서 설치함
        </p>
        <p id="t01">
            @font-face : 상업적 글꼴 제공시 사용
            <p>글꼴 서버에서 글꼴을 다운로드함<br />
            www.google.com/fonts<br />
            www.typolink.co.kr
            </p>
        <p>웹 글꼴은 비영리로 구글에서 제공하고 있음</p>
        <hr />
        <h2>글꼴 모양, 굵기</h2>
        <p style="font-style: italic">글꼴 모양은 normal, italic 등이 있음</p>
        <p style="font-weight: bold">글꼴 굵기는 bold 등이 있음</p>
        <hr />
        
        <h2>글꼴 정렬하기 : text-align</h2>
        <p style="text-align: right">오른쪽 정렬</p>
        <p style="text-align: left">왼쪽 정렬</p>
        <p style="text-align: center">가운데 정렬</p>
        <hr />
        
        <h2>줄 간격 지정 : line-height</h2>
        <p style="line-height: 150%">
            1234567890가나다라마바사아자차카타파하<br />
            1234567890가나다라마바사아자차카타파하<br />
            1234567890가나다라마바사아자차카타파하<br />
            1234567890가나다라마바사아자차카타파하<br />
            1234567890가나다라마바사아자차카타파하<br />
        </p>
        <hr />
        
        <h2>글꼴 꾸미기 : text-decoration</h2>
        <p style="text-decoration: underline ">글꼴 꾸미기 : 밑줄</p>
        <p style="text-decoration: overline">글꼴 꾸미기 : 윗줄</p>
        <p style="text-decoration: line-through">글꼴 꾸미기 : 취소선</p>
        <p style="text-decoration: blink">글꼴 꾸미기 : 깜빡임</p>
        <hr />
        
        <h2>그림자 효과 : text-shadow</h2>
        <p>text-shadow : 그림자시작x축 그림자시작y축 흐림정도 그림자 색상</p>
        <p style="text-shadow:  3px 5px 5px navy; font-size: 2em; font-weight: bold">그림자 속성</p>
        
    </body>
</html>